﻿<mockups:WindowsPhoneChrome xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:mockups="clr-namespace:Microsoft.Expression.Prototyping.WindowsPhone.Mockups;assembly=WindowsPhone.Mockups"
                            xmlns:pc="http://schemas.microsoft.com/prototyping/2010/controls"
                            xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                            xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity"
                            xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
                            xmlns:wp="http://schemas.microsoft.com/prototyping/2010/controls/windowsphone"
                            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            mc:Ignorable="d"
                            x:Class="MS_SocialPhotoSketchScreens.MainPage"
                            x:Name="PhoneChrome">
    <mockups:WindowsPhoneChrome.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ProjectDataSources.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <DataTemplate x:Key="SocialPhotoItemTemplate">
                <StackPanel>
                    <Image Source="{Binding Photo}"
                           HorizontalAlignment="Left"
                           Height="70"
                           Width="145" />
                    <TextBlock Text="{Binding Name}"
                               Height="20"
                               Width="145"
                               HorizontalAlignment="Center"
                               Style="{StaticResource BasicTextBlock-Sketch}" />
                </StackPanel>
            </DataTemplate>
        </ResourceDictionary>
    </mockups:WindowsPhoneChrome.Resources>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Landscape" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Landscape"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Portrait" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Portrait"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <mockups:WindowsPhoneChrome.BackButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateBackAction />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/back.png" />
        </Button>
    </mockups:WindowsPhoneChrome.BackButton>

    <mockups:WindowsPhoneChrome.HomeButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Home" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/home.png" />
        </Button>
    </mockups:WindowsPhoneChrome.HomeButton>

    <mockups:WindowsPhoneChrome.SearchButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Search" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/search.png" />
        </Button>
    </mockups:WindowsPhoneChrome.SearchButton>

    <Grid x:Name="LayoutRoot">
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager />
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates"
                              ei:ExtendedVisualStateManager.UseFluidLayout="True">
                <VisualState x:Name="Portrait" />
                <VisualState x:Name="Landscape">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(WindowsPhoneChrome.PageOrientation)"
                                                       Storyboard.TargetName="PhoneChrome">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <mockups:PageOrientation>Landscape</mockups:PageOrientation>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <wp:Pivot Title="Social Photo"
                  FontSize="24">

            <wp:PivotItem Header="Top rate">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <ListBox DataContext="{Binding}"
                             Style="{StaticResource ListBox-Sketch}"
                             ItemTemplate="{StaticResource SocialPhotoItemTemplate}"
                             ItemsSource="{Binding SocialPhoto, Source={StaticResource SampleDataSource}}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.DetailPage" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Width="450" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                    <mockups:ApplicationBarMockup Grid.Row="1">
                        <mockups:ApplicationBarMockup.IconButtonsContent>
                            <StackPanel HorizontalAlignment="Center"
                                        Orientation="Horizontal">
                            	 <mockups:ApplicationBarIconButton Content="Look around"
                                                                  ImageSource="AppBarIcons/Map.png">
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="Click">
                                            <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Screen_1" />
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </mockups:ApplicationBarIconButton>
                                <mockups:ApplicationBarIconButton Content="Shoot"
                                                                  ImageSource="AppBarIcons/camera2.png">
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="Click">
                                            <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.ShootPage" />
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </mockups:ApplicationBarIconButton>
                            </StackPanel>
                        </mockups:ApplicationBarMockup.IconButtonsContent>
                        <mockups:ApplicationBarMockup.MenuItemsContent>
                            <StackPanel>
                                <TextBlock Margin="4"
                                           Style="{StaticResource PhoneTextTitle3Style-Sketch}"
                                           Text="Shoot" />
                                <TextBlock Margin="4"
                                           Style="{StaticResource PhoneTextTitle3Style-Sketch}"
                                           Text="Preferences" />
                                <TextBlock Margin="4"
                                           Style="{StaticResource PhoneTextTitle3Style-Sketch}"
                                           Text="Logout" />
                            </StackPanel>
                        </mockups:ApplicationBarMockup.MenuItemsContent>
                    </mockups:ApplicationBarMockup>
                </Grid>
            </wp:PivotItem>
            <wp:PivotItem Header="My photo">
                <Grid Height="643"
                      Width="456">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <ListBox DataContext="{Binding}"
                             Style="{StaticResource ListBox-Sketch}"
                             ItemTemplate="{StaticResource SocialPhotoItemTemplate}"
                             ItemsSource="{Binding SocialPhoto, Source={StaticResource SampleDataSource}}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Width="450" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                    <mockups:ApplicationBarMockup Grid.Row="1">
                        <mockups:ApplicationBarMockup.IconButtonsContent>
                            <StackPanel HorizontalAlignment="Center"
                                        Orientation="Horizontal">
                                <mockups:ApplicationBarIconButton Content="Look around"
                                                                  ImageSource="AppBarIcons/Map.png">
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="Click">
                                            <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Screen_1" />
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </mockups:ApplicationBarIconButton>
                                <mockups:ApplicationBarIconButton Content="Shoot"
                                                                  ImageSource="AppBarIcons/camera2.png"> 
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="Click">
                                            <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.ShootPage" />
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </mockups:ApplicationBarIconButton>

                            </StackPanel>
                        </mockups:ApplicationBarMockup.IconButtonsContent>
                        <mockups:ApplicationBarMockup.MenuItemsContent>
                            <StackPanel>
                                <TextBlock Margin="4"
                                           Style="{StaticResource PhoneTextTitle3Style-Sketch}"
                                           Text="Look around" />
                                <TextBlock Margin="4"
                                           Style="{StaticResource PhoneTextTitle3Style-Sketch}"
                                           Text="Shoot" />
                                <TextBlock Margin="4"
                                           Style="{StaticResource PhoneTextTitle3Style-Sketch}"
                                           Text="Preferences" />

                            </StackPanel>
                        </mockups:ApplicationBarMockup.MenuItemsContent>
                    </mockups:ApplicationBarMockup>
                </Grid>
            </wp:PivotItem>
        </wp:Pivot>
    </Grid>
</mockups:WindowsPhoneChrome>
